<template>
	<view class='wrapper'>
		<!-- 商品图片 -->
		<swiper class="pics" indicator-dots indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#fff">
			<swiper-item v-for="item in goodInfo.pics">
				<image class="pics"
					:src="item.pics_mid" />
			</swiper-item>
		</swiper>
		<!-- 基本信息 -->
		<view class="meta">
			<view class="price">￥{{goodInfo.goods_price}}</view>
			<view class="name">{{goodInfo.goods_name}}</view>
			<view class="shipment">快递: 免运费</view>
			<text class="collect icon-star">收藏</text>
		</view>

		<!-- 商品详情 -->
		<view class="detail">
			<view v-html="goodInfo.goods_introduce"></view>
			<!-- <rich-text :nodes="goods.goods_introduce"></rich-text> -->
		</view>

		<!-- 操作 -->
		<view class="action">
			<button open-type="contact" class="icon-handset">联系客服</button>
			<text class="cart icon-cart" @click="goCarts">购物车</text>
			<text class="cart-count">{{goodsCount}}</text>
			<text class="add" @click="hAdd">加入购物车</text>
			<text class="buy">立即购买</text>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				// 商品详情 -- 请求没有回来之前，它是空对象
				goodInfo: {}
			}
		},
		computed: {
			...mapGetters(['goodsCount'])
		},
		onLoad({id}){
			if(id) {
				this.getGoods(id)
			}
		},
		methods: {
			goCarts() {
				console.log('进入购物车页面')
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			hAdd() {
				// 调用vuex的muations添加到购物车
				const goods = {
					goods_id: this.goodInfo.goods_id,  
					goods_name: this.goodInfo.goods_name,  
					goods_price:this.goodInfo.goods_price,  
					goods_small_logo:this.goodInfo.goods_small_logo,   
					goods_count:1, // 一次加1件商品
					goods_checked: true // 商品选中
				}
				this.$store.commit('cart/add', goods)
			},
			async getGoods(id) {
				const res = await this.request({
					url: '/goods/detail',
					data: {
						goods_id: id
					}
				})
				console.log('商品详情', res)
				this.goodInfo = res.data
			}
		}
	}
</script>

<style lang="scss">
	.wrapper {
		margin-bottom: 100rpx;
		background-color: #f4f4f4;
	}

	.pics,
	{
	width: 750rpx;
	height: 640rpx;
	}

	.meta {
		height: 250rpx;
		line-height: 1;
		padding: 30rpx 180rpx 30rpx 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: relative;

		.price {
			font-size: 36rpx;
			color: #ea4451;
			margin-bottom: 20rpx;
		}

		.name {
			color: #333;
			line-height: 1.4;
			font-size: 33rpx;

			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.shipment {
			font-size: 27rpx;
			color: #999;
			position: absolute;
			bottom: 30rpx;
		}

		.collect {
			width: 140rpx;
			height: 88rpx;
			text-align: center;
			box-sizing: border-box;
			border-left: 1rpx solid #ddd;
			font-size: 24rpx;
			color: #999;

			position: absolute;
			right: 10rpx;
			top: 91rpx;
		}

		[class*="icon-"]::before {
			display: block;
			font-size: 45rpx;
			margin-bottom: 10rpx;
		}
	}

	.detail image {
		width: 100%;
		height: 480rpx;
		margin-top: 20rpx;
	}

	.action {
		width: 100%;
		height: 98rpx;
		background-color: #fff;

		position: fixed;
		left: 0;
		bottom: 0;

		display: flex;
		align-items: center;

		text {
			display: block;
		}

		.add,
		.buy {
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 210rpx;
			text-align: center;
			font-size: 27rpx;
			color: #fff;
		}

		.add {
			background-color: #f4b73f;
		}

		.buy {
			background-color: #ea4451;
		}

		button {
			padding: 0;
			border-radius: 0;
			background-color: #fff;

			&::after {
				border: none;
			}
		}

		button,
		.cart {
			flex: 1;
			text-align: center;
			color: #989898;
			font-size: 24rpx;
			box-sizing: border-box;
		}

		[class*="icon"]::before {
			display: block;
			font-size: 45rpx;
			margin-bottom: 2rpx;
		}
	}

	.cart-count {
		position: absolute;
		top: -16rpx;
		left: 252rpx;
		font-size: 28rpx;
		background-color: #ea4451;
		color: #fff;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50rpx;
		line-height: 50rpx;
		text-align: center;
	}
</style>